<template>
    <div id="leibiao">
        <ul>
            
            <li class="ll" v-for="(item, index) in datas" :key="index">
                <router-link   tag="div" :to='"/shops/"+(index+1)'>
                <div @click='cz(item.restaurant.id)'>
                <div class="d1">
                    <div class="dd1">
                        <div class="ddd1">
                            <img class="dddimg" :src="item.restaurant.image_path" alt="">
                        </div>
                    </div>
                    <div class="dd2">
                        <h3 class="dv1">{{item.restaurant.name}}</h3>
                        <div class="dv2"><span class="ico"><el-rate
  v-model="item.restaurant.rating"
  disabled
  show-score
  text-color="#ff9900"
  score-template="{value}">
</el-rate></span> <span>{{item.restaurant.rating}}</span><span> 月销{{item.restaurant.recent_order_num}}单</span></div>
                        <div class="dv3"><span>¥{{item.restaurant.float_minimum_order_amount}}元起送</span> | <span>配送费{{item.restaurant.float_delivery_fee}}元</span></div>
                    </div>
                </div>
                <div class="d2">
                    <div v-show="!item.restaurant.recommend.is_ad" class="d2_dv1"><img class="d_img" :src="item.restaurant.recommend.image_hash" alt="">{{item.restaurant.recommend.reason}}</div>
                    <div class="d2_dv2"><span class="sp1"><span class="sp2">{{item.restaurant.activities[0].icon_name}}</span></span><span >{{item.restaurant.activities[0].description}}</span></div>
                    <div class="d2_dv3"><span class="sp4"><span class="sp5" :class="{sp6:item.restaurant.activities[1].type==106}">{{item.restaurant.activities[1].icon_name}}</span></span><span class="dv3_dv">{{item.restaurant.activities[1].description}}</span></div>
                </div></div>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            datas:[]
        }
    },
    methods:{
        cz(e){
            this.$emit('events',e);
        },
        axios(){
            axios.get('/api/shops9.json').then(this.success).catch(this.errors)
        },
        success(data){
            this.datas=data.data.items
            data.data.items.forEach(element => {
               let reg = RegExp(/png/)
               let suffix = 'jpeg'
          if (reg.test(element.restaurant.image_path)) {
            suffix = 'png'
          }
          let imgpath = `${element.restaurant.image_path.slice(0,1)}/${element.restaurant.image_path.slice(1,3)}/${element.restaurant.image_path.slice(3)}`
          element.restaurant.image_path = `https://fuss10.elemecdn.com/${imgpath}.${suffix}%3FimageMogr2/thumbnail/130x130/format/webp/quality/85`
                let ree = 'png'
                if (!element.restaurant.recommend.is_ad) {
                let imgurl = `${element.restaurant.recommend.image_hash.slice(0,1)}/${element.restaurant.recommend.image_hash.slice(1,3)}/${element.restaurant.recommend.image_hash.slice(3)}`
                 element.restaurant.recommend.image_hash =`http://fuss10.elemecdn.com/${imgurl}.${ree}?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/`
            }
            });
           
        },
        errors(err){
            console.log(err)
        }

    },
    mounted() {
           this.axios()
        },
}
</script>

<style lang="stylus" scoped>
@import '~styles/ellipsis.styl';
        .ll
            display block
            position relative
            border-bottom .133333vw solid #eee
            background-color #fff
            color #666
            padding 4vw 0
            list-style none
            font-size .293333rem
            line-height normal
            .d1
                display flex
                padding 0 2.666667vw
                .dd1
                    position relative
                    flex none
                    .ddd1
                        position relative
                        width 17.333333vw
                        height 17.333333vw
                        .dddimg
                            box-sizing border-box
                            display block
                            width 100%
                            height 100%
                            border-radius .533333vw
                            border .133333vw solid rgba(0,0,0,.08)
                .dd2
                    padding-left 2.67vw
                    .dv1
                        display flex
                        margin-bottom .4vw
                        padding 0
                        color #333
                        font-weight 700
                        font-size .4rem
                        overflow hidden
                    .dv2
                        margin-bottom .8vw
                        .ico
                            color #ffb712

            .d2
                padding-left 22.666667vw
                .d2_dv1
                    display flex
                    margin 2.666667vw 2.666667vw 0 0
                    color #f00
                    font-size .266667rem
                    .d_img
                        height 2.666667vw
                        margin-top .4vw
                        margin-right .8vw
                .d2_dv2
                    .sp1
                        height 3.733333vw
                        width 3.733333vw
                        margin-right 1.6vw
                        display inline-block
                        
                        position relative
                        vertical-align middle
                        .sp2
                            position absolute
                            left 0
                            top 0
                            z-index 0
                            height .35rem
                            width .4rem
                            color #fff
                            font-size .3rem
                            background-color #0f0
                            background-color rgb(112, 188, 70)
                            text-align center
                            line-height .35rem
                        
                .d2_dv3
                    font-size .293333rem
                    line-height 4.8vw
                    margin-top .667vw
                    .sp4
                        height 3.733333vw
                        width 3.733333vw
                        margin-right 1.6vw
                        display inline-block
                        position relative
                        vertical-align middle
                        .sp5
                            position absolute
                            left 0
                            top 0
                            z-index 0
                            height .35rem
                            width .4rem
                            color #fff
                            font-size .3rem
                            background-color #0f0
                            background-color: rgb(240, 115, 115);
                            text-align center
                            line-height .35rem
                        .sp6
                           background-color: rgb(60, 199, 145); 
                    .dv3_dv
                        white-space nowrap
                        text-overflow ellipsis

                    
</style>

